<template>
  <div style="padding: 0px 100px">
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
      "
    >
      <div
        style="
          font-weight: 400;
          font-size: 14px;
          color: #97999c;
          line-height: 20px;
          justify-content: space-between;
        "
      >
        字段查询条件
      </div>
      <div
        class="addButton"
        @click="
          () => {
            form.tableQueryGroupReqDTOList.push({
              tableQueryGroupAddDTOList: [
                { queryType: 'general', columnStyle: 'input' },
              ],
              tableQueryMappingAddDTO: { nextRelation: 'and' },
            });
          }
        "
      >
        <div style="line-height: 28px; color: #2983ff">+</div>
        <div
          style="
            width: 28px;
            height: 20px;
            line-height: 28px;
            font-weight: 400;
            font-size: 14px;
            color: #2983ff;
          "
        >
          新增
        </div>
      </div>
    </div>
    <div>
      <div class="conditionList">
        <div style="margin-right: 139px">查询字段</div>
        <div style="margin-right: 116px">显示样式</div>
        <div style="margin-right: 25px">查询类型</div>
        <div style="margin-right: 159px">查询条件</div>
      </div>
      <!-- style="padding:10px" -->
      <!-- <div style="height: 300px;overflow-y: scroll;"> -->
      <div style="overflow-y: scroll">
        <a-form
          :label-col-props="labelCol"
          :wrapper-col-props="wrapperCol"
          :model="form"
        >
          <draggable
            v-model="form.tableQueryGroupReqDTOList"
            item-key="id"
            handle=".drag-handle"
            @end="onDragEnd"
          >
            <div
              class="conditionGroup"
              v-for="(item, index) in form.tableQueryGroupReqDTOList"
              :key="index"
            >
              <div style="display: flex">
                <div
                  v-if="form.tableQueryGroupReqDTOList.length > 1"
                  class="drag-handle"
                >
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shangxiatuozhuai"></use>
                  </svg>
                </div>
                <div
                  class="custom-div"
                  v-if="item.tableQueryGroupAddDTOList.length > 1"
                >
                  <div class="child-div">或</div>
                </div>
                <div v-else style="width: 46px"></div>
                <div>
                  <div
                    :style="{
                      marginBottom:
                        index2 === item.tableQueryGroupAddDTOList.length - 1
                          ? '0px'
                          : '10px',
                    }"
                    style="
                      margin-bottom: 10px;
                      display: flex;
                      align-items: center;
                    "
                    :gutter="55"
                    v-for="(ros, index2) in item.tableQueryGroupAddDTOList"
                    :key="index2"
                  >
                    <div>
                      <a-form-item style="width: 205px; margin-right: 10px">
                        <a-select
                          v-model="ros.queryKey"
                          @change="queryKeyChange(ros)"
                        >
                          <a-option
                            :disabled="
                              item.tableQueryGroupAddDTOList
                                .map((ros) => ros.queryKey)
                                .includes(pageData.formData.dataIndex)
                            "
                            v-for="pageData in dataObj.pageData"
                            :key="pageData.formData.dataIndex"
                            :value="pageData.formData.dataIndex"
                            >{{ pageData.formData.name }}</a-option
                          >
                          <a-option
                            :disabled="
                              item.tableQueryGroupAddDTOList
                                .map((ros) => ros.queryKey)
                                .includes(exKeysData.formData.dataIndex)
                            "
                            v-for="exKeysData in dataObj.exKeysData"
                            :key="exKeysData.formData.dataIndex"
                            :value="exKeysData.formData.dataIndex"
                            >{{ exKeysData.formData.name }}</a-option
                          >
                        </a-select>
                      </a-form-item>
                    </div>
                    <!-- ros.queryKey -->
                    <div>
                      <!-- searchType 查询控件 -->
                      <a-form-item style="width: 162px; margin-right: 10px">
                        <a-select
                          v-model="ros.columnStyle"
                          @change="columnStyleChange(ros)"
                          :disabled="!ros.queryKey"
                        >
                          <a-option
                            :value="enumerate.value"
                            v-for="enumerate in searchTypeOptions"
                            :key="enumerate.value"
                          >
                            {{ enumerate.label }}
                          </a-option>
                        </a-select>
                      </a-form-item>
                    </div>
                    <div>
                      <!-- dataIndex: 'formData.controlType', 查询类型 -->
                      <a-form-item style="width: 70px; margin-right: 10px">
                        <a-select
                          class="custom-select"
                          :disabled="!ros.queryKey"
                          style="background: #f1f7ff; border-radius: 16px"
                          v-model="ros.queryType"
                          @change="queryTypeChange(ros)"
                        >
                          <a-option value="general">默认</a-option>
                          <a-option value="range">范围</a-option>
                          <a-option value="nexPower">是否</a-option>
                        </a-select>
                      </a-form-item>
                    </div>
                    <!-- queryType 类型-->
                    <div v-if="ros.queryType === 'general'">
                      <a-form-item style="width: 160px">
                        <a-select v-model="ros.type" :disabled="!ros.queryKey">
                          <a-option
                            v-for="(value, key) in conditionEnum"
                            :key="value"
                            :value="value"
                            >{{ key }}</a-option
                          >
                        </a-select>
                      </a-form-item>
                    </div>
                    <div
                      v-else-if="ros.queryType === 'range'"
                      style="display: flex"
                    >
                      <!-- formData.condition.0.queryType  范围 -->
                      <a-form-item style="width: 160px">
                        <a-select
                          v-if="ros.between && ros.between[0]"
                          v-model="ros.between[0].type"
                          :disabled="!ros.queryKey"
                        >
                          <a-option
                            v-if="['大于', '大于等于'].includes(key)"
                            v-for="(value, key) in conditionEnum"
                            :key="value"
                            :value="value"
                            >{{ key }}</a-option
                          >
                        </a-select>
                      </a-form-item>
                      <!-- formData.condition.1.queryType -->
                      <a-form-item style="width: 160px; margin-left: 10px">
                        <a-select
                          v-if="ros.between && ros.between[1]"
                          v-model="ros.between[1].type"
                          :disabled="!ros.queryKey"
                        >
                          <a-option
                            v-if="['小于', '小于等于'].includes(key)"
                            v-for="(value, key) in conditionEnum"
                            :key="value"
                            :value="value"
                            >{{ key }}</a-option
                          >
                        </a-select>
                      </a-form-item>
                    </div>
                    <div
                      style="
                        width: 35px;
                        margin-left: 10px;
                        display: flex;
                        justify-content: space-between;
                      "
                    >
                      <svg
                        class="icon delIcon"
                        @click="
                          () => {
                            form.tableQueryGroupReqDTOList[index]
                              .tableQueryGroupAddDTOList.length === 1
                              ? form.tableQueryGroupReqDTOList.splice(index, 1)
                              : form.tableQueryGroupReqDTOList[
                                  index
                                ].tableQueryGroupAddDTOList.splice(index2, 1);
                          }
                        "
                        aria-hidden="true"
                      >
                        <use
                          xlink:href="#icon-a-shanchuicon_morenbeifen9"
                        ></use>
                      </svg>
                      <svg
                        class="icon addIcon"
                        @click="
                          () => {
                            form.tableQueryGroupReqDTOList[
                              index
                            ].tableQueryGroupAddDTOList.push({
                              queryType: 'general',
                              columnStyle: 'input',
                            });
                          }
                        "
                        aria-hidden="true"
                      >
                        <use
                          xlink:href="#icon-a-tianjiaicon_morenbeifen12"
                        ></use>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </draggable>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import { searchTypeOptions } from "./base/options";
export default {
  name: "ConditionGroup",
  components: {
    draggable,
  },
  inject: ["dataObj"],
  data() {
    return {
      form: {
        tableQueryGroupReqDTOList: [],
      },
      searchTypeOptions,
      // typeOption: {
      //   '输入框': 'input',
      //   '下拉框': 'select',
      //   '单选框': 'radio',
      //   '上传': 'upload',
      //   '日期选择器': 'datePicker',
      //   '多行文本框': 'textarea',
      //   '数字输入框': 'inputNumber',
      //   '多选框': 'checkbox',
      //   '时间选择器': 'timePicker',
      //   '键值对输入': 'keyValueInput',
      //   '富文本框': 'editor',
      //   '树状控件': 'tree',
      //   '计算公式': 'countFormula'
      // },
      conditionEnum: {
        等于: "eq",
        小于: "lt",
        大于: "gt",
        小于等于: "lte",
        大于等于: "gte",
        "在...之中": "in",
        "不在...之中": "nin",
        不等于: "ne",
        // '正则': 'regex',
        // '大小': 'size',
        // '所有都满足': 'all',
        // '存在': 'exists',
        // '字段类型': 'type',
        // '空': 'null',
        // '非空': 'notNull',
        模糊匹配: "like",
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
  },
  // columnStyle
  mounted() {
    console.log(this.dataObj, "this.dataObjthis.dataObjthis.dataObj");
    this.form.tableQueryGroupReqDTOList =
      this.dataObj.tableDesc.tableQueryGroupReqDTOList || [];
  },
  methods: {
    onDragEnd(evt) {
      console.log("拖拽结束", evt);
    },
    queryTypeChange(ros) {
      // 点击查询类型
      this.$set(ros, "type", null);
      this.$set(ros, "between", null);
      if (ros.queryType === "general") {
        this.$set(ros, "type", "eq");
      } else if (ros.queryType === "range") {
        this.betweenChange(ros);
      } else if (ros.queryType === "nexPower") {
        this.$set(ros, "type", "if");
      }
      // ros.queryType === '2'?betweenChange(ros):null,ros.queryType === '3'?ros.type = 'if':null
    },
    columnStyleChange(ros) {
      if (ros.queryType === "range") {
        // console.log(ros, 'rosrosors')
        ros.between[0].columnStyle = ros.columnStyle;
        ros.between[1].columnStyle = ros.columnStyle;
      }
    },
    betweenChange(ros) {
      // 选中查询类型为范围
      console.log(ros, "rosrosros");
      let selectedRos;
      const regex = /collection\./;
      if (regex.test(ros.queryKey)) {
        // if (ros.queryKey.endsWith('._id')) {
        ros.columnKey = ros.queryKey;
        selectedRos = this.dataObj.exKeysData
          .map((item) => {
            return item.formData.dataIndex === ros.queryKey ? item : null;
          })
          .filter((item) => item !== null)[0];
      } else {
        ros.columnKey = ros.queryKey;
        selectedRos = this.dataObj.pageData
          .map((item) => {
            return item.formData.dataIndex === ros.queryKey ? item : null;
          })
          .filter((item) => item !== null)[0];
      }

      this.$set(ros, "between", [
        {
          // groupIndex: 1,
          queryKey: ros.queryKey + "-start",
          columnKey: ros.columnKey,
          innerKey: null,
          queryType: "range",
          type: "gt",
          defaultValue: selectedRos?.defaultValue,
          // columnStyle: selectedRos.type,
          columnStyle: ros.columnStyle,
          columnType: selectedRos?.formData.dataType,
          nextRelation: "between",
          valueFlag: false,
          between: null,
        },
        {
          // groupIndex: 2,
          queryKey: ros.queryKey + "-end",
          columnKey: ros.columnKey,
          innerKey: null,
          queryType: "range",
          type: "lt",
          defaultValue: selectedRos?.defaultValue,
          // columnStyle: selectedRos.type,
          columnStyle: ros.columnStyle,
          columnType: selectedRos?.formData.dataType,
          nextRelation: "between",
          valueFlag: false,
          between: null,
        },
      ]);
    },
    queryKeyChange(ros) {
      // 选择查询字段
      this.$set(ros, "columnStyle", "input");
      // this.$set(ros, 'columnStyle', null)
      this.$set(ros, "between", null);
      ros.nextRelation = "or";
      console.log(ros, "rosrosros");
      const regex = /collection\./;
      if (regex.test(ros.queryKey)) {
        // if (ros.queryKey.endsWith('._id')) {
        ros.columnKey = ros.queryKey;
        const selectedRos = this.dataObj.exKeysData
          .map((item) => {
            return item.formData.dataIndex === ros.queryKey ? item : null;
          })
          .filter((item) => item !== null)[0];
        ros.columnType = selectedRos?.formData.dataType;
        // ros.columnStyle = selectedRos.type
        ros.defaultValue = selectedRos?.defaultValue;
      } else {
        ros.columnKey = ros.queryKey;
        const selectedRos = this.dataObj.pageData
          .map((item) => {
            return item.formData.dataIndex === ros.queryKey ? item : null;
          })
          .filter((item) => item !== null)[0];
        ros.columnType = selectedRos?.formData.dataType;
        // ros.columnStyle = selectedRos.type
        ros.defaultValue = selectedRos?.defaultValue;
      }
    },
    tableQueryMappingAdd() {
      // 添加mapping
      this.form.tableQueryMappingAddDTO.push({
        nextRelation: "and",
        // groupIndex: this.form.tableQueryMappingAddDTO.length
      });
    },
  },
  watch: {
    form: {
      handler(value) {
        this.$set(
          this.dataObj.tableDesc,
          "tableQueryGroupReqDTOList",
          value.tableQueryGroupReqDTOList
        );
      },
      deep: true,
    },
  },
};
</script>

<style lang="less" scoped>
.addButton {
  // width: 70px;
  padding: 0px 15px;
  height: 30px;
  gap: 0px 5px;
  cursor: pointer;
  background: #ffffff;
  border-radius: 15px;
  border: 1px solid #2983ff;
  display: flex;
  align-content: center;
  justify-content: space-evenly;
}

.addButton:hover {
  background: #e8f2ff;
}

.conditionList {
  display: flex;
  align-content: center;
  // justify-content: space-evenly;
  width: 100%;
  flex-wrap: wrap;
  height: 30px;
  padding: 0px 77px;
  background: #f7f8fa;
  border-radius: 6px;
  font-weight: 500;
  color: #222b3c;
}

.conditionGroup {
  background: #fafbfd;
  border-radius: 8px;
  padding: 16px 10px;
  margin: 10px 0px;
}

.conditionGroup:hover {
  background: #f1f7ff;
}

/deep/ .custom-select .arco-select-view {
  border-radius: 16px !important; /* 设置圆角半径 */
  background: #f1f7ff !important;
  border: 1px solid #d8e8fd !important;
}

/deep/ .custom-select .arco-select-view:hover {
  background: #ffffff !important;
  border: 1px solid #1890ff !important;
}
//  .arco-form-item
/deep/ .arco-form-item {
  margin-bottom: 0px !important;
}

/deep/ .arco-select-view-value {
  color: #515665;
}

.custom-div {
  border-left: 1px solid #d9d9d9; /* 左侧边框 */
  border-top: 1px solid #d9d9d9; /* 上侧边框 */
  border-bottom: 1px solid #d9d9d9; /* 下侧边框 */
  border-top-left-radius: 15px; /* 左上角圆角 */
  border-bottom-left-radius: 15px; /* 左下角圆角 */
  width: 30px;
  margin: 16px 0px 16px 16px;
  position: relative; /* 设置父元素为相对定位，使子元素可以绝对定位 */
}

.child-div {
  width: 25px;
  height: 25px;
  line-height: 13px;
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: -13px; /* 左边线 */
  transform: translateY(-50%); /* 垂直居中调整 */
  padding: 5px; /* 子元素内边距 */
  background-color: #ffffff; /* 子元素背景色 */
  border: 1px solid #d9d9d9;
  border-radius: 7px;
  font-weight: 500;
  // cursor: pointer;
}

.drag-handle {
  display: flex;
  align-content: left;
  align-items: center;
  // margin-top: -4px;
}

.icon {
  font-size: 20px;
  color: #646a73;
  cursor: pointer;
}

.icon:hover {
  color: #2983ff; /* 悬停后的颜色 */
}

.delIcon {
  font-size: 14px;
  color: #97999c;
  cursor: pointer;
}

.delIcon:hover {
  color: red;
}

.addIcon {
  width: 12px;
  height: 12px;
  cursor: pointer;
  color: #97999c;
}

.addIcon:hover {
  color: #2983ff; /* 悬停后的颜色 */
}
</style>
